<template>
  <div class="MyRegister page" ref="webview">
    <van-nav-bar title="报单中心" class="bg_white" left-arrow @click-left="$router.go(-1)" />
    <div class="content">
      <template v-if="isAddType">
        <van-field v-model="form.memberNo" :disabled="true" label="会员编号" input-align="right" clearable placeholder="请输入会员编号" />
        <van-field v-model="form.nickname" label="昵称" :disabled="true" input-align="right" clearable placeholder="输入昵称" />
        <van-field v-model="form.recName" clearable :disabled="true" label="推荐人" input-align="right" placeholder="请输入推荐人" />
        <van-field v-model="form.parentName" clearable :disabled="true" label="接点人" input-align="right" placeholder="请输入接点人" />
        <van-field v-model="form.scName" clearable label="报单中心" input-align="right" placeholder="请输入报单中心编码" />
        <div class="bk active van-hairline--bottom" @click="isAction=true">
          <span class="label">级别</span>
          <div class="name" :class="{active: levelValue}">{{levelValue || '请选择级别'}}</div>
        </div>
        <div class="bk active van-hairline--bottom">
          <span class="label">市场</span>
          <div class="sname">
            <van-radio-group v-model="form.theArea">
              <van-radio name="1">左区</van-radio>
              <van-radio name="2">右区</van-radio>
            </van-radio-group>
          </div>
        </div>
      </template>
      <template v-else>
        <div class="textInfo">您已经成为报单中心</div>
        <div class="bk van-hairline--bottom">
          <span class="label">会员编号</span>
          <div class="sname">{{queryInfo.memberNo}}</div>
        </div>
        <div class="bk van-hairline--bottom">
          <span class="label">昵称</span>
          <div class="sname">{{queryInfo.memberNo}}</div>
        </div>
        <div class="bk van-hairline--bottom">
          <span class="label">报单级别</span>
          <div class="sname">{{queryInfo.levelName}}</div>
        </div>
        <div class="bk van-hairline--bottom">
          <span class="label">负责地区</span>
          <div class="sname">{{queryInfo.scArea}}</div>
        </div>
        <div class="bk van-hairline--bottom">
          <span class="label">报单中心名称</span>
          <div class="sname">{{queryInfo.scName}}</div>
        </div>
        <div class="bk van-hairline--bottom">
          <span class="label">注册积分余额</span>
          <div class="sname">{{queryInfo.regScore}}</div>
        </div>
        <div class="bk van-hairline--bottom">
          <span class="label">申请日期</span>
          <div class="sname">{{queryInfo.createTime}}</div>
        </div>
      </template>
      <div class="addCard" v-if="isAddType">
        <van-button class="btn" round :loading="isLoading" @click.native="submitCapplyMessage">申请报单资格</van-button>
      </div>
    </div>
    <van-action-sheet v-model="isAction" :round="false " @select="selectAction" cancel-text="取消" :actions="level" description="级别 " />
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
  name: 'declaration',
  data () {
    return {
      isLoading: false,
      isAction: false,
      levelValue: '',
      form: {
        memberNo: '',
        nickname: '',
        recName: '',
        parentName: '',
        recordNo: '',
        levelValue: 1,
        theArea: '1'
      },
      queryInfo: {},
      list: []
    };
  },
  computed: {
    isAddType () {
      return parseInt(this.$route.query.type) === 1;
    },
    ...mapGetters(['level'])
  },
  created () {
    this.sCapplyMessage();
  },
  methods: {
    selectAction (data) {
      this.isAction = false;
      this.selectActionItem = data;
    },
    submitCapplyMessage () {
      if (!this.form.scName) {
        this.$toast('报单中心编码不能为空');
        return;
      }
      this.isLoading = true;
      this.$API.user.sCapplyMessage({
        scName: this.form.scName,
        scArea: this.form.theArea
      }, '').then(res => {
        if (!res.code) {
          setTimeout(() => {
            this.$router.replace({ path: '/prompt', query: { type: 1 } });
          }, 200);
          this.isLoading = false;
        } else {
          this.$toast(res.message);
          this.isLoading = false;
        }
      });
    },
    sCapplyMessage () {
      this.$toast.loading({ duration: 0 });
      this.$API.user.sCapplyMessage({}, 'message').then(res => {
        if (!res.code) {
          this.queryInfo = res.data;
          if (this.isAddType) {
            this.form.memberNo = this.queryInfo.memberNo;
            this.form.nickname = this.queryInfo.nickname;
            this.form.recName = this.queryInfo.recName;
            this.form.theArea = this.queryInfo.theArea + '';
            this.levelValue = this.queryInfo.levelName;
            this.form.parentName = this.queryInfo.parentName;
          }
          this.$toast.clear();
        } else {
          this.$toast(res.message);
          this.isLoading = false;
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.MyRegister {
  display: flex;
  flex-direction: column;
  .content {
    flex: 1;
    .textInfo {
      background-color: #f5f5f5;
      padding: 25px 44px;
      font-size: 28px;
    }
  }
  .addCard {
    color: #fff;
    font-size: 32px;
    text-align: center;
    position: fixed;
    bottom: calc(30px + env(safe-area-inset-bottom));
    left: 40px;
    right: 40px;
    .btn {
      width: 100%;
      background-color: #fff;
      color: #111;
      border: none;
    }
    .van-button__text {
      color: #125dff;
      font-size: 32px;
      &::before {
        display: inline-block;
        font-size: 40px;
        margin-right: 10px;
      }
    }
  }
}
</style>
